<style scoped lang="scss">
    ::v-deep {
        .el-tree-node__expand-icon {
            display: none;
        }
    }
    
    .custom-tree-node {
        padding-left: 10px;
        padding-right: 10px;
    }
</style>
<template>
    <section style="padding: 10px;display:flex;">
        <div style="margin-right:20px;padding-right:10px;">
            <el-tree :data="treeData"
                     :highlight-current="true"
                     :lazy="true"
                     :props="{ children: 'children',
                        label: 'label',
                     isLeaf: (data) => !data.haveNext}"
                     ref="tree"
                     node-key="id"
                     @node-click="(data)=>{handleNodeClick(data)}"
            >
               <span class="custom-tree-node" style="font-size:14px;" slot-scope="{ node, data }">
               {{data.label}}
               </span>
            </el-tree>
        </div>
        <div style="width:calc(100% - 100px);">
            <el-form :model="queryParams" ref="queryForm" class="queryForm" :inline="true" v-show="showSearch"
                     @submit.native.prevent>
                <el-form-item label="字段类型" desc="字段类型" prop="fieldType">
                    <dic-select v-model="queryParams.fieldType" :code="dicInner.mes_bpm_form_fieldType"
                                placeholder="字段类型" clearable size="small" style="width:120px;"
                                @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="表达式" desc="表达式" prop="expression">
                    <el-input v-model.trim="queryParams.expression" placeholder="表达式" clearable size="small"
                              style="width:120px;" @keyup.enter.native="handleQuery" />
                </el-form-item>
             <!--   <el-form-item label="状态" desc="状态 1 正常  5暂停 10废除" prop="state">
                    <dic-select v-model="queryParams.state" :code="dicInner.mes_bpm_condition_expression_state"
                                placeholder="状态 1 正常  5暂停 10废除" clearable size="small" style="width:120px;"
                                @keyup.enter.native="handleQuery" />
                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @submit.native.prevent
                               @click="handleQuery">
                        搜索
                    </el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5" class="buttonsRow">
                    <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
                </el-col>
                <right-toolbar @layout="(_obj)=>columnsHidden=_obj" :showSearch.sync="showSearch"
                               @queryTable="getInfoList"></right-toolbar>
            </el-row>
            <section class="tablecontainer">
                <el-table border ref="multipleTable" :data="dataList" size="mini" class="tabletop" tooltip-effect="dark"
                          style="width: 100%" @selection-change="rows=>{         selectRows=rows      }"
                          @row-click="row=>{          tableRowClickOnece(row,'multipleTable')      }"
                          :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="40"></el-table-column>
                    <el-table-column v-if="!columnsHidden['fieldType']" label="字段类型" prop="fieldType"
                                     min-width="120px;">
                        <template slot-scope="scope">
                            <dic-tag :code="dicInner.mes_bpm_form_fieldType"
                                     v-model="scope.row.fieldType"></dic-tag>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="!columnsHidden['expression']" label="表达式" prop="expression"
                                     min-width="120px;">
                        <template slot-scope="scope">
                            <div> {{scope.row.expression}}</div>
                        </template>
                    </el-table-column>
                <!--    <el-table-column v-if="!columnsHidden['state']" label="状态" prop="state" min-width="120px;">
                        <template slot-scope="scope">
                            <dic-tag :code="dicInner.mes_bpm_condition_expression_state"
                                     v-model="scope.row.state"></dic-tag>
                        </template>
                    </el-table-column>-->
                    <el-table-column label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
                        <template slot-scope="scope">
                            <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span></template>
                    </el-table-column>
                    <el-table-column label="更新时间/人" prop="lastEditTime/editUser"
                                     v-if="!columnsHidden['lastEditTime/editUser']">
                        <template slot-scope="scope"><span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="66" fixed="right">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="操作" width="222" trigger="hover">
                                <div>
                                    <el-button size="mini" type="text" icon="el-icon-edit"
                                               @click="()=>triggerModify(scope.row)"> 修改
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-notebook-1"
                                               @click="()=>openLog(scope.row)">变更日志
                                    </el-button>
                                    <el-button size="mini" type="text" icon="el-icon-delete"
                                               @click="()=>handleDelete(scope.row)">删除
                                    </el-button>
                                </div>
                                <el-button slot="reference" type="text">操作</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination :background="true" style="padding: 20px;" :current-page.sync="queryParams.pageNum"
                               :page-size="queryParams.pageSize" layout="prev, pager, next" :total="total"
                               @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                               @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"></el-pagination>
            </section>
        </div>
    </section>

</template>
<script>
  import { formData, formMethod, PageData } from '@/utils/formcommon';
  import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
  import * as  api from '@/apis/mesBpmConditionExpression.api.js';
  import { default as FormDialog } from '@codegenarate/mydialogplus';
  
  const dicInner = {
    mes_bpm_form_fieldType: 'mes_bpm_form_fieldType',
    '___mes_bpm_condition_expression_id': '主键ID',
    'mes_bpm_condition_expression_id': 'mes_bpm_condition_expression_id',
    '___mes_bpm_condition_expression_fieldType': '字段类型',
    'mes_bpm_condition_expression_fieldType': 'mes_bpm_condition_expression_fieldType',
    '___mes_bpm_condition_expression_expression': '表达式',
    'mes_bpm_condition_expression_expression': 'mes_bpm_condition_expression_expression',
    '___mes_bpm_condition_expression_state': '状态 1 正常  5暂停 10废除',
    'mes_bpm_condition_expression_state': 'mes_bpm_condition_expression_state',
    '___mes_bpm_condition_expression_remarks': '备注',
    'mes_bpm_condition_expression_remarks': 'mes_bpm_condition_expression_remarks',
    '___mes_bpm_condition_expression_tenantType': '租户类型 1应用管理者2应用消息者',
    'mes_bpm_condition_expression_tenantType': 'mes_bpm_condition_expression_tenantType',
    '___mes_bpm_condition_expression_tenantId': '租户ID',
    'mes_bpm_condition_expression_tenantId': 'mes_bpm_condition_expression_tenantId',
    '___mes_bpm_condition_expression_delState': '有效状态[数据字典=del_state] 1有效  5删除',
    'mes_bpm_condition_expression_delState': 'mes_bpm_condition_expression_delState',
    '___mes_bpm_condition_expression_addUser': '添加人',
    'mes_bpm_condition_expression_addUser': 'mes_bpm_condition_expression_addUser',
    '___mes_bpm_condition_expression_addUserId': '添加人ID',
    'mes_bpm_condition_expression_addUserId': 'mes_bpm_condition_expression_addUserId',
    '___mes_bpm_condition_expression_addTime': '添加时间',
    'mes_bpm_condition_expression_addTime': 'mes_bpm_condition_expression_addTime',
    '___mes_bpm_condition_expression_editUser': '最近更新人',
    'mes_bpm_condition_expression_editUser': 'mes_bpm_condition_expression_editUser',
    '___mes_bpm_condition_expression_editUserId': '最近更新人ID',
    'mes_bpm_condition_expression_editUserId': 'mes_bpm_condition_expression_editUserId',
    '___mes_bpm_condition_expression_lastEditTime': '最近更新时间',
    'mes_bpm_condition_expression_lastEditTime': 'mes_bpm_condition_expression_lastEditTime',
    '___mes_bpm_condition_expression_serverNumber': '服务器编号ID',
    'mes_bpm_condition_expression_serverNumber': 'mes_bpm_condition_expression_serverNumber',
  };
  import { ajaxDicList } from '@/utils/dic';
  
  export default {
    name: 'mesBpmConditionExpressionlist',
    data() {
      return {
        api: api,
        dicInner, ...formData,
        queryParams: {
          name: '', ...PageData,
        },
        lists: [],
        selectRows: [],
        classId: '',
        classIdPath: '',
        className: '',
        loading: false,
        isFold: false,
        tableRowClassName({ row, rowIndex }) {
          if (row.rowType == 'total') {
            return 'total-row';
          }
          return '';
        },
        treeData: [],
      };
    },
    components: {
      svgIcon: () => import('@codegenarate/svg-icon'),
      dicSelect: () => import('@/components/dicselect.vue'),
      dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
      RightToolbar: () => import('@/components/RightToolbar/index.vue'),
      modify: () => import('./modify'),
    },
    mounted() {
      this.initTreeData();
      //this.getInfoList();
    },
    filters: { dateFormatYYYYMMDD: dateFormatYYYYMMDD },
    computed: {},
    watch: {},
    methods: {
      ...formMethod,
      handleNodeClick(data) {
        this.selectTreeNode = data;
        this.queryParams.fieldType = data.value;
        this.queryParams.pageNum = 1;
        console.log('选中节点之后', data);
        this.getInfoList();
      },
      async initTreeData() {
        var self = this;
        var treeData = await ajaxDicList(dicInner.mes_bpm_form_fieldType).then(list => {
          return list || [];
        });
        this.treeData = treeData;
      },
      tableRowClickOnece(row, tableRef, options) {
        var table = this.$refs[tableRef];
        if (options && options.canSelect) {
          var istrue = options.canSelect(row);
          if (!istrue) {
            table && table.toggleRowSelection(row, false);
          }
        }
        table && table.clearSelection();
        table && table.toggleRowSelection(row);
      },
      async triggerModify(row) {
        var self = this;
        var fieldType = row && row.fieldType || this.queryParams.fieldType;
        ;
        var result = await FormDialog({
          width: '888px', title: row?.id ? '编辑' : '新增', data() {
            return {
              ...row,
              fieldType,
            };
          },
          components: { modify: () => import('./modify.vue') },
        });
        if (!(result && result.success)) {
          return result;
        }
        this.getInfoList();
      },
    },
  };</script>
